<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
          display: block;
        }
        .container {
          width: 450px;
          border: 3px solid black;
          margin: 30px;
          position: relative;
        }
    
        .btns {
          display: flex;
          justify-content: flex-start;
          padding: 10px;
          border-top: 1px solid black;
        }
    
        .btns > div {
          margin: 10px;
          border: 1px solid transparent;
        }
        .btns > div.active {
          border: 1px solid red;
        }
    
        .show {
          position: relative;
        }
    
        .mask {
          width: 200px;
          height: 200px;
          background-color: orange;
          opacity: 0.4;
          position: absolute;
          top: 0;
          left: 0;
          /* display: none; */
        }
    
        .enlarge {
          width: 355px;
          height: 355px;
          position: absolute;
          left: 110%;
          top: 0;
          background: url('./imgs/1.big.jpg');
          /* display: none; */
          background-size: 800px 800px;
        }
        
      </style>
    </head>
    <body>
      <div class="container">
        <div class="show">
          <img src="./imgs/1.jpg" alt="middle">
          <div class="mask"></div>
        </div>
        <div class="btns">
    
          <div class="active" data-src="./imgs/1.jpg" data-enlarge-src="./imgs/1.big.jpg">
            <img src="./imgs/1.small.jpg" alt="">
          </div>
          <div data-src="./imgs/2.jpg" data-enlarge-src="./imgs/2.big.jpg">
            <img src="./imgs/2.small.jpg" alt="">
          </div>
        </div>
        <div class="enlarge"></div>
      </div>
    </body>
    </html>
    
    <script type="module">
    import Enlarge from './enlarge.js';
    
    /* 
    1. 点击 btn ，使得 show 的图片 根据 btn 切换， enlarger 亦如此。
    
    2. 鼠标 移入 show, mask  和  enlarge 显示;  移出 mask 和 enlarge 隐藏
    
    3. 鼠标在 show 里面移动， mask 跟随鼠标移动
       同时 enlarge 显示的内容 是 mask 覆盖的 图片的内容
    */
    new Enlarge('.container');
    </script>